<template>
  <div>
    <div class="main-box mT60">
      <div class="title tit-bor">
        <h3>在线咨询</h3>
      </div>
      <div class="grid-x zixun">
        <div class="column small-3 medium-2"><label for="inp-name" class="label-text">您的姓名：</label></div>
        <div class="column small-9 medium-10">
          <input type="text" class="inp-text" id="inp-name" v-model="name"/><span class="imp middle">*</span>
        </div>
        <div class="column small-3 medium-2"><label for="inp-phone" class="label-text">联系电话：</label></div>
        <div class="column small-9 medium-10">
          <input type="text" class="inp-text" id="inp-phone" v-model="phone"/><span class="imp middle">*</span>
        </div>
        <div class="column small-3 medium-2"><label for="inp-email" class="label-text">电子邮箱：</label></div>
        <div class="column small-9 medium-10">
          <input type="text" class="inp-text" id="inp-email" v-model="email"/>
        </div>
        <div class="column small-3 medium-2"><label class="label-text mB0">留言内容：</label></div>
        <div class="column small-9 medium-10"><p class="imp-text">（200字以内）</p></div>
        <div class="column small-12">
          <textarea class="textarea-box" v-model="content"></textarea>
          <span class="imp middle">*</span>
        </div>
        <div class="but-out text-center">
          <input type="button" class="butA submit-b" value="提交" @click.stop="submit" style="text-align: center;"/>
          <input type="button" class="butA reset-b" value="重置" @click.stop="reset" style="text-align: center;"/>
        </div>
      </div>
      <div class="title tit-bor">
        <h3>常见咨询</h3>
      </div>
      <div class="zixun_A">
        <div class="zixun_item">
          <p class="zixun-p">姓名：何嘉丽<span class="zixun-time">（2018-06-21 15:07:35）</span></p>
          <p class="zixun-p">电话：136****1234</p>
          <div class="zixun-box">
            <p><img src="../../../static/images/wen.png">：你好！请问有没有在线学习的课程?你好！请问有没有在线学习的课程?你好！请问有没有在线学习的课程?</p>
            <p><img src="../../../static/images/da.png">：你好！请问有没有在线学习的课程?你好！请问有没有在线学习的课程?你好！请问有没有在线学习的课程?</p>
          </div>
        </div>
        <hr class="hr-b"/>
        <div class="zixun_item">
          <p class="zixun-p">姓名：何嘉丽<span class="zixun-time">（2018-06-21 15:07:35）</span></p>
          <p class="zixun-p">电话：136****1234</p>
          <div class="zixun-box">
            <p><img src="../../../static/images/wen.png">：你好！请问有没有在线学习的课程?你好！请问有没有在线学习的课程?你好！请问有没有在线学习的课程?</p>
            <p><img src="../../../static/images/da.png">：你好！请问有没有在线学习的课程?你好！请问有没有在线学习的课程?你好！请问有没有在线学习的课程?</p>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import commonJs from '../../assets/js/commonJs'

  export default {
    name: "Online",
    data() {
      return {
        name: "",
        phone: "",
        email: "",
        content: ""
      }
    },
    mounted() {

    },
    methods: {
      submit() {
        let {name, phone, email, content} = this;
        if (name == null || name == '') {
          commonJs.openToast('请输入您的姓名！', 'warn');
          return;
        }
        if (phone == null || phone == '') {
          commonJs.openToast('请输入联系电话！', 'warn');
          return;
        }
        if (content == null || content == '') {
          commonJs.openToast('请输入留言内容！', 'warn');
          return;
        }
        console.log({name, phone, email, content});
        commonJs.openToast('提交成功！', 'success', () => {
          this.reset();
        });
      },
      reset() {
        this.name = '';
        this.phone = '';
        this.email = '';
        this.content = '';
      }
    }
  }
</script>

<style scoped>

</style>
